<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>试卷详情</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .bottom-delete {

            color: white;
            border-color: #7D7D7D;
            background-color: #7D7D7D
        }

        .bottom-delete:hover {

            color: white;
            border-color: #8A8A8A;
            background-color: #8A8A8A
        }

        .bottom-delete:active {

            color: white;
            border-color: #707070;
            background-color: #707070
        }

        .bottom-main {
            color: aliceblue;
            border-color: #6666FF;
            background-color: #6666FF
        }

        .bottom-main:hover {
            color: aliceblue;
            border-color: #8080FF;
            background-color: #8080FF
        }

        .bottom-main:active {
            color: aliceblue;
            border-color: #4D4DFF;
            background-color: #4D4DFF
        }

        .bottom-main:focus {
            color: aliceblue;
            border-color: #4D4DFF;
            background-color: #4D4DFF
        }


    </style>
</head>
<body>
<div id="app" style="width: 90%;margin-left: 50px;margin-top: 50px">
    <el-page-header @back="goBack" content="试卷详情"></el-page-header>

    <el-dialog title="题目信息" :visible.sync="dialogFormVisible" style="width: auto">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item
                    prop="question"
                    label="题干："
                    :rules="[
      { required: true, message: '请输入题干', trigger: 'blur' }
    ]"
            >
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-input v-model="dynamicValidateForm.question"></el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item
                    v-for="(domain, index) in dynamicValidateForm.options"
                    :label="'选项' + index2ABC(index)"
                    :prop="'options.' + index"
                    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
            >
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-input v-model="domain.option"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button class="bottom-delete"
                                   icon="el-icon-delete"
                                   size="mini"
                                   @click.prevent="removeDomain(domain)"
                        >删除选项
                        </el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="14" style="margin-top: 20px">
                    <el-col :span="4" style="align-content:center">
                        分值
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="domain.score"></el-input>
                    </el-col>
                </el-row>

            </el-form-item>
            <el-form-item>
                <el-button class="bottom-main"
                           type="primary" @click="submitForm('dynamicValidateForm')">提交
                </el-button>
                <el-button @click="addDomain">新增选项</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <div style="float: right">
        <el-button class="bottom-main"
                   @click="toAdd" type="success">添加题目
        </el-button>
    </div>

    <el-table
            :data="pagination.items"
            style="width: 100%">
        <!--prop数组中对象的属性名，label是显示的内容-->
        <!--        <el-table-column-->
        <!--                type="index"-->
        <!--                width="50">-->
        <!--        </el-table-column>-->
        <el-table-column
                prop="id"
                label="题目id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="question"
                label="题目题干"
                width="450">
        </el-table-column>

        <el-table-column label="操作"
                         width="250">
            <template slot-scope="scope">
                <!--
                    scope.row 表示当前行的对象
                    scope.row.id 表示当前行对象的id
                -->
                <el-button
                        @click="toEdit(scope.row.id)"
                        size="mini"
                        icon="el-icon-edit">编辑
                </el-button>
                <el-button
                        @click="deleteQuestion(scope.row.id)"
                        size="mini"
                        icon="el-icon-delete">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 50px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[3, 5, 8, 10]"
                :page-size="pagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.counts">
        </el-pagination>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            addOrEdit: false,
            dialogFormVisible: false,
            tableData: [],//表格数据
            pagination: {
                items: [],
                page: 1, //当前页
                pagesize: 10,    //每页显示条数
                counts: 0        //总条数
            },
            Authorization: "",
            question: {},
            dynamicValidateForm: {
                options: [{
                    option: '',
                    score: ''
                }],
                question: '',
                qid: '',
                sid: ''
            }
        },
        methods: {
            findByPage(paperId) {
                let url = '/question/' + paperId + '/findQuestions/?page=' + this.pagination.page + '&pagesize=' + this.pagination.pagesize;
                axios.get(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    this.pagination = resp.data;
                });
            },
            findOptionByQuestionId(questionId) {
                let url = '/question/' + questionId + '/findOptionsByQuestionId';
                axios.get(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    this.dynamicValidateForm = resp.data;
                });
            },
            toEdit(questionId) {
                //将dialog窗口的标记改成false表示在进行修改
                this.addOrEdit = false;
                //先根据id查询该用户
                this.findOptionByQuestionId(questionId);
                //弹框
                this.dialogFormVisible = true;
            },
            doEdit() {
                let url = '/question';
                axios.put(url, this.dynamicValidateForm, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    //成功，重新查询数据
                    this.findByPage(this.dynamicValidateForm.sid);
                    //关闭弹出框
                    this.dialogFormVisible = false;
                });
            },
            toAdd() {
                //将dialog标记改成添加的标记【true】
                this.addOrEdit = true;
                //把user对象的内容情况
                this.question = {};
                //弹出dialog窗口
                this.dialogFormVisible = true;
                this.resetForm();
            },
            doAdd() {
                let url = '/question/saveQuestion';
                axios.post(url, this.dynamicValidateForm, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    //添加成功，重新查询
                    this.findByPage(this.dynamicValidateForm.sid);
                    //关闭弹出框
                    this.dialogFormVisible = false;
                });
            },
            deleteQuestion(questionId) {
                let confirm = window.confirm("确定要删除吗？");
                if (confirm) {
                    let url = '/question/' + questionId
                    axios.delete(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                        this.findByPage(this.dynamicValidateForm.sid);
                    });
                }
            },
            handleSizeChange(val) {
                this.pagination.pagesize = val;
                this.findByPage(this.dynamicValidateForm.sid);
            },
            handleCurrentChange(val) {
                this.pagination.page = val;
                this.findByPage(this.dynamicValidateForm.sid);
            },
            goBack() {
                location.href = 'paperManager.html'
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.addOrEdit) {
                            //如果标记是true，执行添加
                            this.doAdd();
                        } else {
                            //如果标记是false，就执行修改
                            this.doEdit();
                        }
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm() {
                this.dynamicValidateForm.options = [{
                    option: '',
                    score: ''
                }];
                // this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                let index = this.dynamicValidateForm.options.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.options.splice(index, 1)
                }
            },
            addDomain() {
                if (this.dynamicValidateForm.options.length > 10) {
                    alert("无法添加更多选项");
                    return;
                }
                this.dynamicValidateForm.options.push({
                    option: '',
                    score: ''
                });
            },
            index2ABC(index) {
                let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
                return arr[index];
            }
        },
        created() {
            this.Authorization = localStorage.getItem("Authorization");
            let params = new URL(location.href).searchParams;
            let paperId = params.get('paperId');
            if (paperId) {
                this.dynamicValidateForm.sid = paperId;
                this.findByPage(paperId);
            }

        }
    });
</script>
</html>